<template>
  <el-cascader
    v-model="selectdKey"
    :value="value"
    :options="cityOptions"
    filterable
    :placeholder="placeholder"
    @change="selectChanged"
    style="width:100%"
    clearable
  ></el-cascader>
</template>
<script>
import cityOptions from "./city_data2017_element";
export default {
  name: "PlaceCascader",
  props: {
    value: {
      type: String,
      default: undefined,
    },
    placeholder: {
      type: String,
      default: "请选择地区",
    },
  },
  data() {
    return {
      cityOptions,
      selectdKey: [],
    };
  },
  created() {
    this.selectdKey = this.value && this.value.split("/");
  },
  methods: {
    selectChanged() {
      this.$emit("update:value", this.selectdKey.join("/"));
    },
  },
};
</script>

<style scoped lang="scss">
</style>
